<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      :max-height="maxTableHeight"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"
        label="序号"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="设备名称"
        resizable
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="设备类型"
        resizable
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="车主名称"
        resizable
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="车牌号"
        resizable
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="黑/白名单"
        resizable
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="room"
        label="有效期"
        resizable
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="300"
        resizable
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain>
            抬杆
          </el-button>
          <el-button
            size="mini"
            type="primary"
            plain>
            落杆
          </el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-document"
            plain
            @click="handleDetails(scope.$index, scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <edit ref="edit"></edit>
  </div>
  
</template>

<script>
  import Edit from './Edit.vue'
  export default {
    components: {
      Edit
    },
    props: {
      maxTableHeight: {
        type: String | Number
      },
      tableData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {

      }
    },
    methods: {
      handleEdit() {
        this.$refs.edit.togglePopup(true)
      },
      // 详情
      handleDetails(index, row) {
        this.$router.push({
          name: 'CarparkDeviceDetails',
          params: {
            id: row.id || 1
          }
        })
      }
    }
    
  }
</script>